﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Word Add-In with Commands Sample</title>

    <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="Scripts/FabricUI/MessageBanner.js" type="text/javascript"></script>
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>

    <!-- To enable offline debugging using a local reference to Office.js, use:                        -->
    <!-- <script src="Scripts/Office/MicrosoftAjax.js" type="text/javascript"></script>  -->
    <!-- <script src="Scripts/Office/1/office.js" type="text/javascript"></script>  -->

    <!-- This is the openxmlsdk from ericwhite.com. -->
    <script src="Scripts/openxmlsdkjs-01-01-02/linq.js"></script>
    <script src="Scripts/openxmlsdkjs-01-01-02/ltxml.js"></script>
    <script src="Scripts/openxmlsdkjs-01-01-02/ltxml-extensions.js"></script>
    <script src="Scripts/openxmlsdkjs-01-01-02/jszip.js"></script>
    <script src="Scripts/openxmlsdkjs-01-01-02/jszip-load.js"></script>
    <script src="Scripts/openxmlsdkjs-01-01-02/jszip-inflate.js"></script>
    <script src="Scripts/openxmlsdkjs-01-01-02/jszip-deflate.js"></script>
    <script src="Scripts/openxmlsdkjs-01-01-02/openxml.js"></script>

    <!-- This is the extension to the Office.js library -->
    <script src="Scripts/Word-extensions/Word-extensions.js" type="text/javascript"></script>

    <link href="Home.css" rel="stylesheet" type="text/css" />
    <script src="Home.js" type="text/javascript"></script>

    <!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.min.css">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.components.min.css">
    
    <!-- To enable the offline use of Office UI Fabric, use: -->
    <!-- link rel="stylesheet" href="Content/fabric.min.css" -->
    <!-- link rel="stylesheet" href="Content/fabric.components.min.css" -->
</head>
<body>
    <div id="content-main">
        <div class="padding">
            <br />
            <p class="ms-font-xxl ms-fontColor-neutralSecondary ms-fontWeight-semilight">Bookmark Sample</p>
            <br /><br />
            <div class="ms-font-xl ms-fontColor-neutralTertiary">Creates bookmarks at the caret position or selection.</div>
            <p class="ms-font-m-plus ms-fontColor-neutralTertiary" id="template-description"></p>
            <div class="ms-font-m">
            </div>
            <br /><br />

            <button class="ms-Button ms-Button--primary" id="bookmark-button">
                <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
                <span class="ms-Button-label" id="button-text"></span>
                <span class="ms-Button-description" id="button-desc"></span>
            </button>
        </div>
    </div>
    <div class="footer">
        <div class="ms-Grid ms-bgColor-themeSecondary">
            <div class="ms-Grid-row">
                <div class="ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg12"> <div class="ms-font-xl ms-fontColor-white">OOXML Bookmarks</div></div>
            </div>
        </div>
    </div>

    <!-- FabricUI component used for displaying notifications -->
    <div class="ms-MessageBanner" style="position:absolute;bottom: 0;">
        <div class="ms-MessageBanner-content">
            <div class="ms-MessageBanner-text">
                <div class="ms-MessageBanner-clipper">
                    <div class="ms-font-m-plus ms-fontWeight-semibold" id="notificationHeader"></div>
                    <div class="ms-font-m ms-fontWeight-semilight" id="notificationBody"></div>
                </div>
            </div>
            <button class="ms-MessageBanner-expand" style="display:none"><i class="ms-Icon ms-Icon--chevronsDown"></i> </button>
            <div class="ms-MessageBanner-action"></div>
        </div>
        <button class="ms-MessageBanner-close"> <i class="ms-Icon ms-Icon--x"></i> </button>
    </div>
</body>
</html>
